 <template>
    <el-container>
        <el-header><f-header></f-header></el-header>
        <el-container>
            <el-aside><f-aside></f-aside></el-aside>
            <el-main >
            <f-tag></f-tag>
            <div class="page" :style="{height:(h+'px')}">
                <!-- 使用keepaline进行页面的缓存，最多十个 -->
                <router-view v-slot="{Component}">
                  <transition>
                  <keep-alive :max="10">
                   <component :is="Component"></component>
                  </keep-alive>
                  </transition>
                </router-view>
            </div>
            </el-main>
        </el-container>
    </el-container>
 </template>
 
 <script setup>
 import FHeader from './component/FHeader.vue'
 import FAside from './component/FAside.vue'
 import FTag from './component/FTag.vue'
 const windowHeight = window.innerHeight || document.body.clientHeight;
 const h = windowHeight - 60-22;
 </script>
 
 <style lang="less" scoped>
 .el-header
{
   --el-header-padding:0;
}

.el-aside
{
  width: 250px;
}

.page
{
    margin-top: 20px;
    @apply bg-gray-200;
   
   
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}


.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-from
{
    transition:0.7s;
}

 </style>